import React, { Fragment, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Image as MyImage } from "antd-mobile";
import ComponentEmpty from "./components/Empty";
import $fetch from "../../../../utils/app/$fetch";
import $reducer from "../../../../utils/app/$reducer";

const StatusEnum: any = {
  on: "当前进行中",
  waiting: "未开始",
};

const ComponentActivity = () => {
  const initState = {
    activityList: {},
    loading: true,
  };
  const [state, dispatch] = $reducer({ ...initState });
  const navigate: any = useNavigate();

  // 调用后端接口获取特典会活动
  useEffect(() => {
    initPage();
  }, []);

  const initPage = async () => {
    const res: any = await $fetch("event/specialEvent");

    let activity: any = {};
    const on: any = [];
    const waiting: any = [];

    res?.map((item: any) => {
      if (item?.eventStatus === "1") {
        on.push(item);
        const img: any = new Image();
        img.src = item?.eventPhoto;
      } else if (item?.eventStatus === "0") {
        waiting.push(item);
      }
    });
    if (!!on?.length) {
      activity["on"] = on;
    }
    if (!!waiting?.length) {
      activity["waiting"] = waiting;
    }
    console.log(activity, "activity");
    dispatch({ activityList: activity, loading: false });
  };

  const renderQueueList = () => {
    return (
      <div className="that_activity_list">
        {Object.entries(state?.activityList).map(
          ([status, record]: any, index: any) => {
            return (
              <Fragment key={index}>
                <div className="item_status">{StatusEnum[status]}</div>
                {record?.map((item: any, index: any) => {
                  if (status === "on") {
                    return (
                      <li className="public_wraper" key={index}>
                        <div className="act_type">
                          <MyImage
                            src={item?.eventPhoto}
                            lazy={true}
                            width="100%"
                            height="100%"
                            fit='cover'
                            placeholder={<MyImage src="" width="100%" height="8rem" />}
                          />
                          <div className="piblic_type">
                            <div
                              className={`${
                                item?.eventType === "1"
                                  ? "tedian"
                                  : "dianqie"
                              }`}
                            >
                              {item?.eventType === "1" ? "特典" : "电切"}
                            </div>
                          </div>
                        </div>
                        <div className="footer">
                          <div className="ticket">
                            <h4>{item?.eventName}</h4>
                            <div>{item?.eventPlace}</div>
                          </div>
                          <div
                            className="join"
                            onClick={() => {
                              navigate("/queue", {
                                state: { eventId: item?.eventId, eventType: item?.eventType },
                              });
                            }}
                          >
                            去参加
                          </div>
                        </div>
                      </li>
                    );
                  } else if (status === "waiting")
                    return (
                      <li key={index} className="item_activity_waiting public_wraper">
                        <div className="piblic_type">
                          <div
                            className={`${
                              item?.eventType === '1' ? "tedian" : "dianqie"
                            }`}
                          >
                            {item?.eventType === '1' ? "特典" : "电切"}
                          </div>
                        </div>
                        <h4>{item?.eventName}</h4>
                        <div className="time">时间：{item?.eventTime}</div>
                        <div className="place">地点：{item?.eventPlace}</div>
                      </li>
                    );
                })}
              </Fragment>
            );
          }
        )}
      </div>
    );
  };

  if (state?.loading) {
    return null;
  } else if (!Object.keys(state?.activityList).length) {
    return <ComponentEmpty />;
  }
  return renderQueueList();
};

export default ComponentActivity;
